import { createRouter, createWebHistory } from 'vue-router'

const Home = () => import('@/pages/Home.vue')
const Roles = () => import('@/pages/Roles.vue')
const RoleList = () => import('@/pages/RoleList.vue')
const Chat = () => import('@/pages/Chat.vue')
const Login = () => import('@/pages/Login.vue')
const Register = () => import('@/pages/Register.vue')
const Profile = () => import('@/pages/Profile.vue')
const MyRoles = () => import('@/pages/MyRoles.vue')
const CreateRole = () => import('@/pages/CreateRole.vue')
const EditRole = () => import('@/pages/EditRole.vue')
const RoleDetails = () => import('@/pages/RoleDetails.vue')
const RoleSquare = () => import('@/pages/RoleSquare.vue')
const PublicRoleDetails = () => import('@/pages/PublicRoleDetails.vue')
const Settings = () => import('@/pages/Settings.vue')

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: RoleSquare },
    { path: '/login', component: Login },
    { path: '/register', component: Register },
    { path: '/roles', component: Roles },
    { path: '/role-list', component: RoleList },
    { path: '/chat', component: Chat },
    { path: '/chat/:roleId', component: Chat, props: true },
    { path: '/profile', component: Profile },
    { path: '/my-roles', component: MyRoles },
    { path: '/create-role', component: CreateRole },
    { path: '/edit-role/:id', component: EditRole, props: true },
    { path: '/role-details/:id', component: RoleDetails, props: true },
    { path: '/role-square', component: RoleSquare },
    { path: '/public-role/:id', component: PublicRoleDetails, props: true },
    { path: '/settings', component: Settings },
  ],
})

export default router


